<template>
  <div class="info_card">
    <!-- 第一部分 -->
    <div class="level_info">
      <div class="level_time">
        <span>当前等级</span>
        <span>{{ levelTime }}</span>
      </div>
      <div class="level_status">
        <span>盲注<br/>--</span>
        <span>下一级<br/>--</span>
        <span>下次休息<br/>--</span>
      </div>
    </div>

    <!-- 第二部分 -->
    <div class="reward_info">
      <div class="reward_title">
        <span>比赛奖励</span>
        <span>排名奖</span>
      </div>
      <div class="reward_details">
        <div v-for="(reward, index) in rewards" :key="index" :style="{ color: getColor(index) }">
          {{ reward.rank }}
          <span>{{ reward.prize }}</span>
        </div>
      </div>
    </div>

    <!-- 第三部分 -->
    <div class="buy_info">
      <div class="buy_in">
        <span>启动筹码</span>
        <span>{{ chipCount }}</span>
      </div>
      <div class="participants">
        <span>买入/重入<br/>--</span>
        <span>总参赛人数<br/>{{ participants }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义数据
const levelTime = ref('00:00');
const rewards = ref([
  { rank: '第一名', prize: '$588' },
  { rank: '第二名', prize: '$288' },
  { rank: '第三名', prize: '$188' },
]);
const chipCount = ref('$5,000');
const participants = ref(200);

// 定义方法，根据 index 返回对应的颜色
const getColor = (index: number): string => {
  if (index === 0) return '#FFB700';
  if (index === 1) return '#C4C4C4';
  if (index === 2) return '#E89160';
  return '#FFFFFF'; // 默认颜色
};
</script>

<style lang="scss" scoped>
.info_card {
  width: 347px;
  // height: 195px;
  margin: 0 auto;
  border-radius: 8px;
  background: #131232;
  box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
  padding: 10px 20px;
  color: #fff;

  .level_info,
  .reward_info,
  .buy_info {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
  }

  .level_info {
    text-align: center;
    // margin-top:  20px;

    .level_time {
      width: 84px;
      height: 40px;
      border-radius: 8px;
      background: #272657;
      position: relative;

      span:first-child {
        display: block;
        width: 56px;
        height: 18px;
        line-height: 18px;
        border-radius: 5px;
        background: #4B4899;
        box-shadow: 0.5px 0.5px 1px 0px #ADA9FF inset;
        color: #FFF;
        text-align: center;
        font-size: 10px;
        font-weight: 500;
        position: absolute;
        top: -7px;
        left: 14px;
        z-index: 99;
      }

      span:last-child {
        display: block;
        margin-top: 18px;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .level_status {
      width: 225px;
      height: 40px;
      flex: 1;
      display: flex;
      justify-content: space-around;
      // margin-top: 10px;
      color: #FFF;
      font-size: 12px;
      font-weight: 400;
    }
  }

  .reward_info {
    margin-top:  10px;
    text-align: center;

    .reward_title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      width: 84px;
      height: 40px;
      border-radius: 8px;
      background: #272657;
      position: relative;
      
      span:first-child {
        display: block;
        width: 56px;
        height: 18px;
        line-height: 18px;
        border-radius: 5px;
        background: #4B4899;
        box-shadow: 0.5px 0.5px 1px 0px #ADA9FF inset;
        color: #FFF;
        text-align: center;
        font-size: 10px;
        font-weight: 500;
        position: absolute;
        top: -7px;
        left: 14px;
        z-index: 99;
      }

      span:last-child {
        width: 100%;
        display: block;
        margin-top: 18px;
        font-size: 14px;
        font-weight: bold;
      }

    }

    .reward_details {
      display: flex;
      justify-content: space-around;
      width: 225px;
      height: 40px;
      flex: 1;
      color: #FFF;
      font-size: 12px;
      font-weight: 400;

      div {
        text-align: center;

        span {
          display: block;
          margin-top: 6px;
          font-size: 12px;
          font-weight: 400;
        }
      }
    }
  }

  .buy_info {
    margin-top:  10px;
    text-align: center;
    border: none;

    .buy_in {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      font-weight: bold;
      width: 84px;
      height: 40px;
      border-radius: 8px;
      background: #272657;
      position: relative;

      span:first-child {
        display: block;
        width: 56px;
        height: 18px;
        line-height: 18px;
        border-radius: 5px;
        background: #4B4899;
        box-shadow: 0.5px 0.5px 1px 0px #ADA9FF inset;
        color: #FFF;
        text-align: center;
        font-size: 10px;
        font-weight: 500;
        position: absolute;
        top: -7px;
        left: 14px;
        z-index: 99;
      }

      span:last-child {
        width: 100%;
        display: block;
        margin-top: 18px;
      }
    }

    .participants {
      text-align: center;
      margin-top: 10px;
      font-size: 12px;
      color: #FFFFFF;
      display: flex;
      justify-content: space-around;
      width: 225px;
      height: 40px;

      span:last-child {
        font-weight: 400;
      }
    }
  }
}
</style>